<template>
    <div class="Detail">
        <div class="nav">
            <ul>
                <li>
                    <a :class="[selected==1?'selected':'']" @click="changeSelected(1)">
                        账户明细
                    </a>
                </li>
                <li>
                    <a :class="[selected==2?'selected':'']" @click="changeSelected(2)">
                        优惠券
                    </a>

                </li>
            </ul>
        </div>
        <div :class="['log',selected==1?'show':'hide']">
            <p v-show="!logs[1]">暂无数据</p>
            <table>
                <tr v-for=" l in logs">
                    <td class="message">{{l.message}}</td>
                    <td>{{l.get_time}}</td>
                    <td class="site-color">{{l.bonus}}</td>
                </tr>
            </table>
        </div>
        <div :class="['tickets',selected==2?'show':'hide']">
            <p v-show="!tickets[1]">暂无数据</p>
            <ul>

                <li  v-for=" t in tickets" :class="t.status===0?'ticket-bg-able':'ticket-bg-disable'">
                    <div>
                    <p class="f16">{{t.name}}</p>
                    <p class="f12">有效期：1年</p>
                    </div>
                    <div>
                        <p class="f16">￥{{t.money}}</p>
                        <p class="f12">{{t.get_time}}发放</p>
                    </div>
                    <p :class="['tag',t.status===0?'dsy':t.status===1?'ysy':'ygq']"></p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import Qs from 'qs';
    export default {
        name: "Detail",
        data() {
            return ({
                selected: 1,
                logs: [],
                tickets: [],
            })
        },
        mounted(){
            this.getLogList();
            this.getTicketList();
        },
        methods:{
            getLogList(){
                let data={
                    token:localStorage.getItem('token'),
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/logList',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        // let token=res.userinfo.token
                        this.logs=res.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getTicketList(){
                let data={
                    token:localStorage.getItem('token'),
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/getTicketList',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        // let token=res.userinfo.token
                        this.tickets=res.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            changeSelected(selected) {
                this.selected = selected;
            }
        },
    }
    document.title = '账户';
</script>

<style scoped>
    @import "../assets/css/common.css";
    .selected {
        background: url(../assets/images/selected.png) no-repeat bottom;
    }

    .message {
        color: #535353;
    }

    .nav li {
        float: left;
        width: 50%;
        padding-top: 20px;
        background: #fff;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #535353;
    }

    .log {
        width: 95%;
        overflow: scroll;
        border-radius: 5px;
        background: #fff;
        padding-bottom: 10px;
        margin: 20px auto;
    }

    table {
        width: 100%;
        margin-left: -17px;
    }

    table th {
        font-weight: normal;
        border-bottom: 1px solid #eee;
    }

    table td {
        color: #a9a9a9;
        border-bottom: 1px solid #eee;
    }

    table .site-color {
        color: #5aace4;
    }

    table tr {
        height: 30px;
        line-height: 30px;
        font-size: 14px;

    }

    .tickets li {
        height: 80px;
        width: 88%;
        overflow: hidden;
        margin-left: 8%;
        color: #edeeee;
        margin-bottom: 20px;
        position: relative;
    }
    .tag{
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 46px;
    }
    .ticket-bg-able {
        background: url(../assets/images/bg-ticket-able.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
    }

    .ticket-bg-disable {
        background: url(../assets/images/bg-ticket-disable.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
    }
    .ygq{
        background: url(../assets/images/ygq-tag.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
    }
    .ysy{
        background: url(../assets/images/ysy-tag.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
    }
    .dsy{
        background: url(../assets/images/dsy-tag.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
    }
    .tickets div{
        float: left;
        width: 50%;
        padding-top: 14px;
    }
</style>
